<template>
  <div class="hotel w">
    <!-- 面包屑 -->
    <div class="crumbs">
      <span>酒店</span>
      <span class="el-icon-arrow-right"></span>
      <span>某某市酒店预订</span>
    </div>
    <!-- 查询 上 -->
    <TopSelect @TopFilter="TopFilter" :cityMapDataName="cityMapDataName"></TopSelect>
    <!-- 查询中 -->
    <div class="CenterSelect">
      <!-- 区域 -->
      <CenterSelctArea></CenterSelctArea>
      <GaoDemap :cityData="cityData" @MapStart="MapStart"></GaoDemap>
      <div class="center_map" id="container"></div>
    </div>
    <!-- 查询 下 -->
    <BottomSelect @BottomFilter="BottomFilter"></BottomSelect>
    <!-- 遍历 bar -->
    <div class="hotel_list">
      <HotelBar v-for="(item,index) of hotelList" :key="index" :hotelItem="item"></HotelBar>
    </div>
  </div>
</template>

<script>
import TopSelect from "@/components/hotel/TopSelect";
import CenterSelctArea from "@/components/hotel/CenterSelctArea";
import GaoDemap from "@/components/hotel/GaoDemap";
import BottomSelect from "@/components/hotel/BottomSelect";
import HotelBar from "@/components/hotel/hotelBar";
export default {
  data() {
    return {
      // 城市
      cityData: {},
      cityMapDataName: "",
      TopFilterValue: "",
      BottomFilterValue: "",
      hotelList: []
    };
  },
  methods: {
    TopFilter(cityData, value) {
      this.TopFilterValue = value;
      this.cityData = cityData;
    },
    BottomFilter(value) {
      this.BottomFilterValue = value;
      // console.log('value: ', value);
    },
    getHotels() {
      let strURL = this.TopFilterValue + this.BottomFilterValue;
      strURL = strURL.substring(0, strURL.lastIndexOf("&"));
      console.log("strURL: ", strURL);
      console.log("this.cityData: ", this.cityData);
      this.$axios({
        method: "get",
        url: "hotels?" + strURL
      }).then(res => {
        // console.log('res: ', res);
        const { data } = res.data;
        // console.log('data: ', data);
        this.hotelList = data;
      });
    },
    // 地图初始位置
    MapStart(value) {
      this.cityMapDataName = value;
      // console.log('value: ', value);
    }
  },
  components: {
    TopSelect,
    CenterSelctArea,
    GaoDemap,
    BottomSelect,
    HotelBar
  }
};
</script>


<style lang="less" scoped>
// 面包屑
.crumbs {
  margin: 18px 0;
  display: flex;
  align-items: center;
  span {
    padding: 0 10px;
    font-size: 14px;
  }
  /deep/ .el-icon-arrow-right {
    color: #c0c4cc;
  }
}

// 查询 中部分
.CenterSelect {
  margin: 20px 0;
  height: 260px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
</style>

